<template>
  <el-card style="height: 100vh">
    <Crud
      ref="crud"
      tooltip-effect="light"
      show-summary
      sumText="呵呵"
      title="消息"
      emptyText="zanwu"
      :columnList="columnList"
      :buttons="['add', 'diy', 'del', 'search', 'reset', 'edit']"
      :defaultSort="{ prop: 'order_number', order: 'asc' }"
      :tools="['export', 'visibility']"
      stripe
      highlight-selection-row
    >
      <template #table-column-createrName="{prop,label}">
        <zq-table-column sortable editable :label="`${label}!`" :prop="prop" align="left" width="100px">
          <template #default="{row,cellValue,index}">
            {{ index }}
            {{ cellValue }}
          </template>
        </zq-table-column>
        <zq-table-column type="sort" label="test" prop="createrName" align="right" width="50px"/>
        <zq-table-column :show-overflow-tooltip="false" sortable label="test2" prop="createrName" align="right" width="50px"/>
      </template>
      <!-- <div slot="empty">123</div> -->
      <template #row-operate-view="{ row, toCommon }">
        <el-button
          title="查看"
          size="mini"
          icon="el-icon-view"
          circle
          type="info"
          @click="toCommon(row, 'view')"
        ></el-button>
      </template>
      <template #row-operate-diy="{ row }">
        <el-button
          title="自定义按钮"
          size="mini"
          icon="el-icon-minus"
          circle
          type="primary"
          @click="$message.success(`自定义按钮[${row.createrName}]`)"
        ></el-button>
      </template>
      <template #search-operate-diy="{ tableData }">
        <el-button
          title="自定义按钮"
          size="small"
          type="info"
          @click="$message.success(`自定义按钮[${tableData[0].phone}]`)"
          >自定义</el-button
        >
      </template>
      <template #mycontent="{ row, cellValue, index,toView }">
        <span
          style="color: red; cursor: pointer"
          @click="toView(row)"
          >序号：{{ row.orderNumber }}#{{index}} 值：{{ cellValue }}</span
        >
      </template>
      <template #search-item-content="{ form, item }">
        <zq-form-item :label="item.label" :prop="item.prop">
          <el-input
            clearable
            placeholder="请输入内容"
            v-model="form[item.prop]"
          ></el-input>
        </zq-form-item>
      </template>
      <template #add-item-content="{ form, item }">
        <zq-form-item :label="item.label" :prop="item.prop" required :span="24">
          <el-input
            clearable
            placeholder="请输入内容"
            v-model="form[item.prop]"
          ></el-input>
        </zq-form-item>
      </template>
      <template #view-item="{ form, item }">
        <zq-form-item :span="12" :label="item.label">
          <el-tag>{{ form[item.prop] }}</el-tag>
        </zq-form-item>
      </template>
      <template #view-item-receiver="{ form, item }">
        <zq-form-item :label="item.label">
          <div v-if="form[item.prop]">
            <el-card>{{ form[item.prop] }}</el-card>
          </div>
        </zq-form-item>
      </template>
      <template #sort-icon>
        <div>三</div>
      </template>

      <template #orderRowItem="{form,item,size}">
        <zq-form-item :size="size" :prop="item.prop">
          <el-input-number maxlength="2" v-model.number="form[item.prop]"></el-input-number>
        </zq-form-item>
      </template>
      <template #orderAddItem="{form,item}">
        <zq-form-item :span="12" :label="item.label" :prop="item.prop">
          <el-input v-model.number="form[item.prop]"></el-input>
        </zq-form-item>
      
      </template>
      <template #searchItemCreater="{form,item}">
        <zq-form-item :label="item.label" :prop="item.prop">
          <zq-input type="select" v-model="form[item.prop]" multiple filterable createable>
            <el-option label="张三" value="zhangsan"></el-option>
            <el-option label="张三2" value="zs"></el-option>
          </zq-input>
        </zq-form-item>
      
      </template>
      <template #header-phone="{label}"><el-button type="text" icon="el-icon-success"></el-button>{{ label }}啊</template>
      <!-- <template #phoneH="{label}"><el-button type="text" icon="el-icon-success"></el-button>{{ label }}啊</template> -->
      <template #header-prefix-content="{label}"><el-button type="text" icon="el-icon-success"></el-button>啊</template>
      <template #orP="{label}">1.{{label}}</template>
    </Crud>
  </el-card>
</template>

<script>
export default {
  data() {
    let validators = this.$validators;
    return {
      columnList: [
        { type: "sort", label: "排序" },
        { type: "index", label: "#"},
        {
          label: "序号",
          inputType: "switch",
          prop: "orderNumber",
          headerPrefix:'orP',
          'filterMultiple':false,
          // resizable:false,
          filterable:true,
          filters:[
            {text:'大于5',value:5},
            {text:'大于7',value:7},
          ],
          filterMethod:(value,row,column)=>{
            return row.orderNumber>value;
          },
          // addItem:'orderAddItem',
          // rowItem:'orderRowItem',
          width: 100,
          editable: true,
          isEdit: false,
          isView: true,
          sortable: true,
        },
        {
          label: "手机号",
          // header:'phoneH',
          prop: "phone",
          align: "left",
          value: "13111115151",
          filterable: true,
          span: 12,
          editable: true,
          sortable: true,
          clearable: true,
          isSearch: true,
          rules: [
            {
              required: true,
              trigger: "blur",
              validator: validators.phoneValidator,
            },
          ],
        },
        {
          label: "接收人",
          prop: "receiver",
          tip:'这是接收人！',
          span: 12,
          input:{
            type:'checkbox-group',
            children: [
            "zhangsan",
            "zs",
            "lisi",
            { label: "王五", value: "wangwu" },
          ],
          },
          // multiple:true,
          filterable:true,
          inputFilterable:true,
          value: ["zs", "wangwu"],
          editable: true,
          

          placeholder: "请输入接收人啊",
        },
        {
          label: "内容",
          inputType: "textarea",
          prop: "content",
          span: 24,
          contentSlot: "mycontent",
          filterable: true,
          clearable: true,
          editable: true,
          isSearch: true,
          required: true,
        },
        {
          label: "创建人",
          span: 6,
          prop: "createrName",
          searchItem:'searchItemCreater',
          isSearch: true,
          isEdit: false,
        },
        {
          label: "yincang",
          span: 6,
          hidden: true,
          prop: "createrName",
          isSearch: true,
          isEdit: false,
        },
        {
          type: "operate",
          label: "操作啊",
          width: 120,
          buttons: ["view", "diy", "edit", "del", "copy"],
        },
      ],
    };
  },
};
</script>

<style></style>
